<template>
  <view
    class="extra-drawer"
  >
    <view
      v-for="item in fnList"
      :key="item.name"
      class="extra-drawer-item"
      @click="clickItem(item)"
    >
      <view
        class="extra-drawer-item__icon"
      >
        <image
          class="extra-drawer-item__icon-image"
          :src="item.icon"
          mode="widthFix"
        ></image>
      </view>
      <text
        class="extra-drawer-item__text"
        v-text="item.title"
      ></text>
    </view>
  </view>
</template>

<script>
  export default {
    data () {
      return {
        fnList: [
          { name: 'image', title: '相册', icon: '../static/icon_btn_image.png' },
          { name: 'camera', title: '拍摄', icon: '../static/icon_btn_camera.png' },
          { name: 'voip', title: '视频通话', icon: '../static/icon_btn_voip.png' },
          { name: 'location', title: '位置', icon: '../static/icon_btn_location.png' },
          { name: 'redpaper', title: '红包', icon: '../static/icon_btn_redpaper.png' },
          { name: 'transfer', title: '转账', icon: '../static/icon_btn_transfer.png' },
          { name: 'use', title: '名片', icon: '../static/icon_btn_use.png' },
          { name: 'file', title: '文件', icon: '../static/icon_btn_file.png' },
        ]
      }
    },
    methods: {
      clickItem (item) {
        this.$emit('click-fn', item)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../common";
  .extra-drawer {
    @extend .base-class;
    @extend .flex;
    height: 265px;
    padding: 15px;
    border-top: 1px solid $br-solid-color;
    flex-wrap: wrap;
    justify-content: space-between;
    .extra-drawer-item {
      height: 70px;
      width: 52px;
      margin: 15px;
      text-align: center;
      .extra-drawer-item__icon {
        @extend .flex;
        width: 52px;
        height: 52px;
        background-color: $c-white;
        border-radius: $br-radius;
        &:active {
          background-color: $c-active;
        }
        .extra-drawer-item__icon-image {
          width: 24px;
        }
      }

      .extra-drawer-item__text {
        margin-top: 6.5px;
        font-size: $fz-small;
        color: $c-mark-deep;
      }
    }
  }
</style>
